# SelectMenu

The `<SelectMenu>` component is made up of two elements: a disclosure (triggerable button), and a popover list of options.

## Import

```jsx
import { SelectMenu } from 'bumbag'
```

## Usage

```live
###tab=Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###

###tab=No Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      isDropdown={false}
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###

###tab=Filled,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
      variant="filled"
    />
  )
}
###

###tab=Borderless,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
      variant="borderless"
    />
  )
}
###

###tab=Underline,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
      variant="underline"
    />
  )
}
###
```

### Labels

```live
###tab=Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      label="Select a fruit..."
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      value={value}
    />
  )
}
###

###tab=Filled,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      label="Select a fruit..."
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      value={value}
      variant="filled"
    />
  )
}
###

###tab=Borderless,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      label="Select a fruit..."
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      value={value}
      variant="borderless"
    />
  )
}
###

###tab=Underline,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      label="Select a fruit..."
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      value={value}
      variant="underline"
    />
  )
}
###
```

If you want to have the label contained within the bounds of the select menu field, supply the `containLabel` prop:

```live
###tab=Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      containLabel
      label="Select a fruit..."
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      value={value}
    />
  )
}
###

###tab=Filled,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      containLabel
      label="Select a fruit..."
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      value={value}
      variant="filled"
    />
  )
}
###
```

### Fields

You can also use the `<SelectMenuField>` component, which internally has a [FieldWrapper](/form/field-wrapper) to wrap form controls such as labels, hint text and validation text.

It accepts a combination of [SelectMenu props](/form/select-menu/#props) and [FieldWrapper props](/form/field-wrapper/#props).

```live
###tab=Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenuField
      label="Select a fruit"
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###

###tab=No Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenuField
      isDropdown={false}
      label="Select a fruit"
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###

###tab=Filled,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenuField
      label="Select a fruit"
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
      variant="filled"
    />
  )
}
###

###tab=Borderless,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenuField
      label="Select a fruit"
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
      variant="borderless"
    />
  )
}
###

###tab=Underline,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenuField
      label="Select a fruit"
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
      variant="underline"
    />
  )
}
###
```

### Sizes

```live
###tab=Default,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <Stack spacing="major-1">
      <SelectMenu
        size="small"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
      />
      <SelectMenu
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
      />
      <SelectMenu
        size="medium"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
      />
      <SelectMenu
        size="large"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
      />
    </Stack>
  );
}
###

###tab=Filled,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <Stack spacing="major-1">
      <SelectMenu
        size="small"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
        variant="filled"
      />
      <SelectMenu
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
        variant="filled"
      />
      <SelectMenu
        size="medium"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
        variant="filled"
      />
      <SelectMenu
        size="large"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
        variant="filled"
      />
    </Stack>
  );
}
###

###tab=Borderless,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <Stack spacing="major-1">
      <SelectMenu
        size="small"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
        variant="borderless"
      />
      <SelectMenu
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
        variant="borderless"
      />
      <SelectMenu
        size="medium"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
        variant="borderless"
      />
      <SelectMenu
        size="large"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
        variant="borderless"
      />
    </Stack>
  );
}
###

###tab=Underline,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <Stack spacing="major-1">
      <SelectMenu
        size="small"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
        variant="underline"
      />
      <SelectMenu
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
        variant="underline"
      />
      <SelectMenu
        size="medium"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
        variant="underline"
      />
      <SelectMenu
        size="large"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
        variant="underline"
      />
    </Stack>
  );
}
###
```

### Disabled

```live
###tab=Default,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      disabled
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###

###tab=Filled,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      disabled
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
      variant="filled"
    />
  )
}
###

###tab=Borderless,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      disabled
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
      variant="borderless"
    />
  )
}
###

###tab=Underline,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      disabled
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
      variant="underline"
    />
  )
}
###
```

#### Disabled options

```live
###tab=Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      onChange={setValue}
      options={[
        { disabled: true, key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { disabled: true, key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###

###tab=No Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      isDropdown={false}
      onChange={setValue}
      options={[
        { disabled: true, key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { disabled: true, key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###
```

### Search

```live
###tab=Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      hasSearch
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###

###tab=No Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      isDropdown={false}
      hasSearch
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###
```

### Multi-select

```live
###tab=Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      isMultiSelect
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###

###tab=No Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      isDropdown={false}
      isMultiSelect
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###
```

#### With tags

```live
###tab=Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      hasTags
      isMultiSelect
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###

###tab=No Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      isDropdown={false}
      hasTags
      isMultiSelect
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###
```

### Loading indicator

```function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      isLoading
      onChange={setValue}
      options={[]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
```

### Option icons

```live
###tab=Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples', iconBefore: 'solid-apple-alt' },
        { key: 2, label: 'Bananas', value: 'bananas', iconAfter: 'solid-apple-alt' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###

###tab=No Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      isDropdown={false}
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples', iconBefore: 'solid-apple-alt' },
        { key: 2, label: 'Bananas', value: 'bananas', iconAfter: 'solid-apple-alt' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###
```

### Fetching data (async)

```live
###tab=Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  const getOptions = React.useCallback(async ({ searchText }) => {
    return fetch(`https://rickandmortyapi.com/api/location/?name=${searchText}`)
      .then(res => res.json())
      .then(({ results }) => ({
        options: results.map(character => ({ key: character.id, label: character.name, value: character }))
      }))
      .catch(err => ({ options: [] }));
  }, [])

  return (
    <SelectMenu
      cacheKey="basic"
      onChange={setValue}
      loadOptions={getOptions}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###

###tab=No Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  const getOptions = React.useCallback(async ({ searchText }) => {
    return fetch(`https://rickandmortyapi.com/api/location/?name=${searchText}`)
      .then(res => res.json())
      .then(({ results }) => ({
        options: results.map(character => ({ key: character.id, label: character.name, value: character }))
      }))
      .catch(err => ({ options: [] }));
  }, [])

  return (
    <SelectMenu
      isDropdown={false}
      cacheKey="basic"
      onChange={setValue}
      loadOptions={getOptions}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###
```

#### Pagination

```live
###tab=Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  const getOptions = React.useCallback(async ({ page, searchText }) => {
    return fetch(`https://rickandmortyapi.com/api/location/?name=${searchText}&page=${page}`)
      .then(res => res.json())
      .then(({ results }) => ({
        options: results.map(character => ({ key: character.id, label: character.name, value: character }))
      }))
      .catch(err => ({ options: [] }));
  }, [])

  return (
    <SelectMenu
      hasSearch
      pagination
      cacheKey="basic"
      onChange={setValue}
      loadOptions={getOptions}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###

###tab=No Dropdown,type=function-live
function Example() {
  const [value, setValue] = React.useState();

  const getOptions = React.useCallback(async ({ page, searchText }) => {
    return fetch(`https://rickandmortyapi.com/api/location/?name=${searchText}&page=${page}`)
      .then(res => res.json())
      .then(({ results }) => ({
        options: results.map(character => ({ key: character.id, label: character.name, value: character }))
      }))
      .catch(err => ({ options: [] }));
  }, [])

  return (
    <SelectMenu
      isDropdown={false}
      hasSearch
      pagination
      cacheKey="basic"
      onChange={setValue}
      loadOptions={getOptions}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
###
```

#### Deferred

```function-live
function Example() {
  const [value, setValue] = React.useState();

  const getOptions = React.useCallback(async ({ page, searchText }) => {
    return fetch(`https://rickandmortyapi.com/api/location/?name=${searchText}&page=${page}`)
      .then(res => res.json())
      .then(({ results }) => ({
        options: results.map(character => ({ key: character.id, label: character.name, value: character }))
      }))
      .catch(err => ({ options: [] }));
  }, [])

  return (
    <SelectMenu
      defer
      cacheKey="basic"
      onChange={setValue}
      loadOptions={getOptions}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
```

### Custom disclosure

```function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      renderDisclosure={
        ({ disclosureProps, label }) =>
          <Box {...disclosureProps}>{label}</Box>
      }
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
```

### Custom option component

```function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      hasSearch
      renderOption={({ MatchedLabel, option }) =>
        <React.Fragment>
          <MatchedLabel />
          <br/>
          <Text fontSize="100">{option.price}</Text>
        </React.Fragment>
      }
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
        { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
        { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
        { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
```

### Custom empty text

```function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      emptyText="No fruits found."
      onChange={setValue}
      options={[]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
```

### Custom empty component

```function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      renderEmpty={({ StaticItem, emptyText, inputValue }) =>
        <StaticItem>
          {emptyText}
          <br />
          <Link>
            Create a fruit
          </Link>
        </StaticItem>
      }
      onChange={setValue}
      options={[]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
```

```function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      hasSearch
      renderEmpty={({ Item, searchText }) =>
        <Item>
          Create <Text fontWeight="semibold">{searchText}</Text>
        </Item>
      }
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
        { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
        { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
        { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
```

### Custom top actions component

```function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      renderTopActions={({ StaticItem }) =>
        <StaticItem hideDropdownOnClick>
          <Link>
            Create a fruit
          </Link>
        </StaticItem>
      }
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' },
        { key: 5, label: 'Peaches', value: 'peaches' },
        { key: 6, label: 'Strawberries', value: 'Strawberries' },
        { key: 7, label: 'Pineapples', value: 'pineapples' },
        { key: 8, label: 'Figs', value: 'figs' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
```

### Custom bottom actions component

```function-live
function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      renderBottomActions={({ StaticItem }) =>
        <StaticItem>
          <Link>
            Create a fruit
          </Link>
        </StaticItem>
      }
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' },
        { key: 5, label: 'Peaches', value: 'peaches' },
        { key: 6, label: 'Strawberries', value: 'Strawberries' },
        { key: 7, label: 'Pineapples', value: 'pineapples' },
        { key: 8, label: 'Figs', value: 'figs' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}
```

## Accessibility

#### Patterns

- `SelectMenu` has a role of `combobox`.
- The `SelectMenu` trigger button has a role of `button`.
- The trigger button has `aria-expanded` set to `true`/`false` depending on the visibility of the popover listbox.
- The trigger button has `aria-haspopup` set to `listbox`.
- The trigger button has it's `aria-controls` value set to the ID of the popover listbox.
- The `SelectMenu` popover has a role of `listbox`.
- Pressing <Key>Enter</Key> or <Key>Space</Key> on the trigger button will trigger the popover listbox.
- If the menu is open, pressing <Key>Esc</Key> will close the listbox.
- If the menu is open, clicking outside the menu bounds will close the listbox.
- If the menu is open, pressing <Key>↑</Key> or <Key>↓</Key> will navigate the menu items.

## Props

### SelectMenu Props

<!-- Automatically generated -->

**<Code fontSize="150" marginRight="major-1">cacheKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

The key to cache the loadOptions results against.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">containLabel</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

If the `label` prop is supplied, is it contained inside the select?

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">defer</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Whether or not the invocation of loadOptions should be deferred until it the Autosuggest is opened.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the  Autosuggest is disabled.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disableClear</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the clear button should be disabled.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">hasSearch</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the select menu has a search component.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">hasTags</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the select menu should have tags of the selected options.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isDropdown</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the select menu is a dropdown menu. Default: `true`

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isLoading</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the select menu is loading.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isMultiSelect</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if multiple options should be selected.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">label</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">limit</Code>** <Code fontSize="100" palette="primary">number</Code> 

Applies a limit to the number of options that appear in the list.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">loadOptions</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`(options: { page?: number; searchText?: string; variables?: any; }) => Promise<{ options: Options; }>`}
</Code>

Supply an async function to `loadOptions` to load options from an external data source.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">loadVariables</Code>** <Code fontSize="100" palette="primary">{ [key: string]: any; }</Code> 

Supply variables (i.e. query parameters) to the `loadOptions` function.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">options</Code>** <Code fontSize="100" palette="primary">Option[]</Code> 

Options to show in the list. If `loadOptions` is supplied, then you don't need to supply this.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onChange</Code>**  <Text marginLeft="major-1" fontSize="150" textTransform="uppercase" color="gray">Required</Text>

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`(newOptions: ""
  | Option
  | Option[], option: ""
  | Option) => void`}
</Code>

Function to invoke when the option has been changed.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">pagination</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the list should be paginated. If `true`, then pagination will be applied to `loadOptions`.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">popoverHeight</Code>** <Code fontSize="100" palette="primary">string</Code> 

Sets the height of the popover list.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">placeholder</Code>** <Code fontSize="100" palette="primary">string</Code> 

Sets the placeholder of the search input.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">size</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`"default"
  | (string & {})
  | "small"
  | "medium"
  | "large"`}
</Code>

Sets the size of the select menu button

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">state</Code>** <Code fontSize="100" palette="primary">string</Code> 

Sets the visual state of the Autosuggest.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">value</Code>** <Code fontSize="100" palette="primary">{ key?: ReactText; label?: string; value?: any; }</Code> <Text marginLeft="major-1" fontSize="150" textTransform="uppercase" color="gray">Required</Text>

Sets the value of the Autosuggest. Must be in the shape of an option (i.e. `{ key: 1, label: 'Jake', value: 'legend' }`).

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">errorText</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">emptyText</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">loadingText</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">loadingMoreText</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">renderBottomActions</Code>** <Code fontSize="100" palette="primary">any</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">renderDisclosure</Code>** <Code fontSize="100" palette="primary">any</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">renderError</Code>** <Code fontSize="100" palette="primary">any</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">renderEmpty</Code>** <Code fontSize="100" palette="primary">any</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">renderLoading</Code>** <Code fontSize="100" palette="primary">any</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">renderLoadingMore</Code>** <Code fontSize="100" palette="primary">any</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">renderOption</Code>** <Code fontSize="100" palette="primary">any</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">renderTopActions</Code>** <Code fontSize="100" palette="primary">any</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">buttonProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 677 more ...;
  ignoreGrayOverride?: boolean;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">itemProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 686 more ...;
  isTabbable?: boolean;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">popoverProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 687 more ...;
  isTabbable?: boolean;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">searchInputProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  unstable_system?: any;
  top?: any;
  right?: any;
  bottom?: any;
  left?: any;
  children?: string | number | boolean | {
     | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 47 more ... | (ReactPortal...`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">tagProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 657 more ...;
  size?: Flexible<...>;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">dropdownMenuInitialState</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  baseId?: string;
  unstable_virtual?: boolean;
  currentId?: string;
  orientation?: Orientation;
  wrap?: boolean | "horizontal" | "vertical";
  rtl?: boolean;
  loop?: boolean | "horizontal" | "vertical";
  ... 11 more ...;
  unstable_preventOverflow?: boolean;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

### SelectMenuField Props

<!-- Automatically generated -->

**<Code fontSize="150" marginRight="major-1">addonBefore</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Addon component to the input (before). Similar to the addon components in Input.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">addonAfter</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Addon component to the input (after). Similar to the addon components in Input.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">selectMenuProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 691 more ...;
  dropdownMenuInitialState?: Partial<...>;
}`}
</Code>

Additional props for the SelectMenu component

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">orientation</Code>** <Code fontSize="100" palette="primary">&#34;horizontal&#34; | &#34;vertical&#34;</Code> 

If addonBefore or addonAfter exists, then the addons will render vertically.

<Divider marginTop="major-2" marginBottom="major-2" />

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>SelectMenu</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">cacheKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

The key to cache the loadOptions results against.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">containLabel</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

If the `label` prop is supplied, is it contained inside the select?

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">debounceInterval</Code>** <Code fontSize="100" palette="primary">number</Code>

If search is enabled, what should the debounce timer be set to (default: 500)?  

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">defer</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Whether or not the invocation of loadOptions should be deferred until it the Autosuggest is opened.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the  Autosuggest is disabled.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disableClear</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the clear button should be disabled.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">hasSearch</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the select menu has a search component.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">hasTags</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the select menu should have tags of the selected options.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isDropdown</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the select menu is a dropdown menu. Default: `true`

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isLoading</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the select menu is loading.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isMultiSelect</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if multiple options should be selected.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">label</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">limit</Code>** <Code fontSize="100" palette="primary">number</Code> 

Applies a limit to the number of options that appear in the list.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">loadOptions</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`(options: { page?: number; searchText?: string; variables?: any; }) => Promise<{ options: Options; }>`}
</Code>

Supply an async function to `loadOptions` to load options from an external data source.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">loadVariables</Code>** <Code fontSize="100" palette="primary">{ [key: string]: any; }</Code> 

Supply variables (i.e. query parameters) to the `loadOptions` function.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">options</Code>** <Code fontSize="100" palette="primary">Option[]</Code> 

Options to show in the list. If `loadOptions` is supplied, then you don't need to supply this.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onChange</Code>**  <Text marginLeft="major-1" fontSize="150" textTransform="uppercase" color="gray">Required</Text>

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`(newOptions: ""
  | Option
  | Option[], option: ""
  | Option) => void`}
</Code>

Function to invoke when the option has been changed.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">pagination</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Indicates if the list should be paginated. If `true`, then pagination will be applied to `loadOptions`.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">popoverHeight</Code>** <Code fontSize="100" palette="primary">string</Code> 

Sets the height of the popover list.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">placeholder</Code>** <Code fontSize="100" palette="primary">string</Code> 

Sets the placeholder of the search input.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">size</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`"default"
  | (string & {})
  | "small"
  | "medium"
  | "large"`}
</Code>

Sets the size of the select menu button

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">state</Code>** <Code fontSize="100" palette="primary">string</Code> 

Sets the visual state of the Autosuggest.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">value</Code>** <Code fontSize="100" palette="primary">{ key?: ReactText; label?: string; value?: any; }</Code> <Text marginLeft="major-1" fontSize="150" textTransform="uppercase" color="gray">Required</Text>

Sets the value of the Autosuggest. Must be in the shape of an option (i.e. `{ key: 1, label: 'Jake', value: 'legend' }`).

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">errorText</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">emptyText</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">loadingText</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">loadingMoreText</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">renderBottomActions</Code>** <Code fontSize="100" palette="primary">any</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">renderDisclosure</Code>** <Code fontSize="100" palette="primary">any</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">renderError</Code>** <Code fontSize="100" palette="primary">any</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">renderEmpty</Code>** <Code fontSize="100" palette="primary">any</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">renderLoading</Code>** <Code fontSize="100" palette="primary">any</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">renderLoadingMore</Code>** <Code fontSize="100" palette="primary">any</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">renderOption</Code>** <Code fontSize="100" palette="primary">any</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">renderTopActions</Code>** <Code fontSize="100" palette="primary">any</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">buttonProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 677 more ...;
  ignoreGrayOverride?: boolean;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">itemProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 686 more ...;
  isTabbable?: boolean;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">popoverProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 687 more ...;
  isTabbable?: boolean;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">searchInputProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  unstable_system?: any;
  top?: any;
  right?: any;
  bottom?: any;
  left?: any;
  children?: string | number | boolean | {
     | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 47 more ... | (ReactPortal...`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">tagProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 657 more ...;
  size?: Flexible<...>;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">dropdownMenuInitialState</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  baseId?: string;
  unstable_virtual?: boolean;
  currentId?: string;
  orientation?: Orientation;
  wrap?: boolean | "horizontal" | "vertical";
  rtl?: boolean;
  loop?: boolean | "horizontal" | "vertical";
  ... 11 more ...;
  unstable_preventOverflow?: boolean;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>FieldWrapper</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">description</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the description text of the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">hint</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the bottom hint text of the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isOptional</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Sets the optional flag (and displays optional text) on the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isRequired</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Sets the required flag (and a required astrix) on the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">labelType</Code>** <Code fontSize="100" palette="primary">&#34;label&#34; | &#34;legend&#34;</Code> 

Sets the label type on the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">tooltip</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the tooltip of the field wrapper. Can be either a string, or a React component.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">tooltipTriggerComponent</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the tooltip trigger component.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">validationText</Code>** <Code fontSize="100" palette="primary">string</Code> 

Sets the bottom validation text of the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

## Theming

 <Theme
  component={'SelectMenu'}
  options={[
    { key: 1, label: 'Apples', value: 'apples' },
    { key: 2, label: 'Bananas', value: 'bananas' },
    { key: 3, label: 'Oranges', value: 'oranges' },
    { key: 4, label: 'Mangos', value: 'mangos' }
  ]}
  placeholder="Search for a fruit..."
  overrides={[
    'SelectMenu.styles.base',
    'SelectMenu.Button.styles.base',
    'SelectMenu.ButtonText.styles.base',
    'SelectMenu.ButtonIconsWrapper.styles.base',
    'SelectMenu.ButtonIcon.styles.base',
    'SelectMenu.Popover.styles.base',
    'SelectMenu.Item.styles.base',
    'SelectMenu.ItemText.styles.base',
    { key: 'SelectMenu.SearchInputWrapper.styles.base', props: { hasSearch: true } },
    { key: 'SelectMenu.SearchInput.styles.base', props: { hasSearch: true } },
    { key: 'SelectMenu.StaticItem.styles.base', props: { options: [] } }
  ]}
/>
